<template>
	<view>
		<u-popup :show="show" @close="show=false" closeOnClickOverlay>
			<view class="title">{{popupTitle}}</view>
			<view style="padding: 20rpx;">
					<u-search inputAlign="center" height="60" searchIconSize="32" v-if="showSearch" @custom="search" @search="search" :placeholder="placeholder"
					v-model="keyword"></u-search>
				<u-gap v-if="showSearch" height="15"></u-gap>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="$emit('lower')">
					<view class="select-list">
						<view class="select-list-box" :class="active==index?'active':''" v-for="(item, index) in list" :key="index" @click="check(index)">
							{{item[name]}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	/**
	 * 公共选择下拉框，基于uview。支持下拉加载、列表搜索、单选｜多选
	 * @author qianziyu
	 * @description 弹出层选择器，基于uview中u-popup实现
	 * @property {Array}			dataLists			数据列表
	 * @property {String}			name				列表显示的字段名
	 * @property {Boolean}			show				是否展示弹窗 (默认 false )
	 * @property {String}			type				选择类型 单选｜多选 (默认 单选 )
	 * @property {Boolean}			showSearch			是否显示搜索框 (默认 true )
	 * @property {String}	        popupTitle			列表标题
	 * @property {String}			placeholder			搜索框placeholder
	 * @event {Function} search 搜索事件，返回keyword
	 * @event {Function} lower 滑动到底部触发，用于下拉加载新数据
	 * @event {Function} cancel 组件关闭事件
	 * @event {Function} submit 提交按钮,返回选中的列表数据
	 * @example <common-select :show="show" :popupTitle="popupTitle" @cancel="show=false" @search="selectSearch" name="cworkStationName" @submit="onsubmit"
			:dataLists="dataLists" placeholder="输入工站名称搜索"></common-select>
	 */
	export default {
		name: "qianziyu-select",
		props: {
			list: {
				default: {},
				type: Array
			},
			name: {
				default: 'name',
			},
			showSearch: {
				default: true,
				type: Boolean
			},
			popupTitle: {
				default: '列表选择',
				type: String
			},
			placeholder: {
				default: '请输入搜索内容'
			}
		},
		data() {
			return {
				active:-1,
				keyword: '',
				scrollTop: 0,
				show:false,
			};
		},
		methods: {
			setShow(flag){
				this.show=flag
			},
			check(index){
				this.active=index
				this.$emit('check',this.list[index])
			},
			//点击搜索触发
			search() {
				this.$emit('search', this.keyword)
			},
			//点击取消按钮触发
			cancel() {
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-safe-area-inset-bottom {
			padding-bottom: 0 !important;
		}
	}
	.u-popup {
		.title {
			border-bottom: 1px solid #f7f7f7;
			padding: 20rpx;
			text-align: center;
			font-weight: bold;
		}
	}

	.scroll-Y {
		height: 400rpx;
		.select-list{
			.select-list-box{
				padding: 15upx 0;
				font-size: 30upx;
				text-align: center;
				border-bottom: 1px solid #f7f7f7;
			}
			.active{
				color: #00aaff;
			}
		}
	}
</style>
